<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-02 16:26:43
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-06 10:17:59
 * @FilePath: serve.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import serveListitem from "@/components/serve/serveListItem.vue";
import api from "@/api/api";
import personIcon from '@/assets/serve/person.png'
import chatIcon from '@/assets/serve/white_chat.png'

// 使用 router
const router = useRouter()

// 响应式数据
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const isTop = ref(true)
const options = ref([])

const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 方法
const onLoad = () => {
  getServeList()
}

const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  isTop.value = scrollTop < 50
}

const getHomeCategory = async () => {
  let params = {
    isTop: "true",
    type: 0,
    keyWords: "",
    parentId: "",
  }
  let res = await api.common.gethomeCategory(params)
  options.value = res
}

const jump = (item) => {
  router.push({
    path: "/baoyang",
    query: {
      id: item.id,
    },
  })
}

const getServeList = async () => {
  let res = await api.order.orderList({
    ...pageInfo,
    orderStatus: 31,
  })

  if (res.data.length == 0) {
    finished.value = true
  }

  list.value = [...list.value, ...res.data]

  if (res.data.length < pageInfo.pageSize) {
    finished.value = true
  } else {
    pageInfo.pageNum++
  }

  loading.value = false
}

// 生命周期
onMounted(() => {
  window.addEventListener("scroll", handleScroll)
  getHomeCategory()
})

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll)
})
</script>

<template>
  <div class="home">
    <van-nav-bar title="服务管家" fixed safe-area-inset-top :style="{ background: isTop ? 'transparent' : '#82b4ef' }" />
    <div class="tips">
      <van-image class="icon" :src="personIcon" />
      <div class="text">
        <div class="text_1">您的智能管家</div>
        <div class="text_2">
          <van-image class="icon2" :src="chatIcon" />
          <span v-if="!list.length">“尊敬的用户，您最近没有待服务的项目哦~”</span>
          <span v-if="list.length > 0">“尊敬的用户，您最近有{{ list.length }}服务项目哦~”</span>
        </div>
      </div>
    </div>
    <div class="options">
      <van-grid :column-num="4" square :border="false">
        <van-grid-item v-for="(v, i) in options" :key="JSON.stringify(v) + i" @click="jump(v)">
          <template #text>
            <span class="options_text">
              {{ v.name }}
            </span>
          </template>
          <template #icon>
            <div class="options_icon">
              <van-image width="100%" height="100%" fit="cover" :src="v.url" />
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="list">
      <div class="list_title">我的服务记录</div>
      <van-list v-model:loading="loading" v-model:finished="finished" :finished-text="list.length > 0 ? '没有更多了' : ''"
        @load="onLoad">
        <serveListitem v-for="(v, i) in list" :key="JSON.stringify(v) + i" :item="v"></serveListitem>
        <van-empty v-if="!loading && list.length == 0" description="暂无记录，期待您在安心修的第1次养护" />
      </van-list>
    </div>
  </div>
</template>


<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 150px 50px 150px 50px;
  background-color: #ffffff;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 20px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  .tips {
    display: flex;
    align-items: center;

    .icon {
      width: 214px;
      height: 214px;
    }

    .text {
      margin-left: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;

      &_1 {
        font-size: 56px;
        color: #ffffff;
        margin-bottom: 35px;
        font-weight: bold;
      }

      &_2 {
        display: flex;
        align-items: center;
        font-size: 38px;
        color: #ffffff;

        .icon2 {
          width: 60px;
          height: 50px;
          margin-right: 20px;
        }
      }
    }
  }

  .wapper {
    margin-top: 65px;
    overflow-x: auto;
    width: calc(100vw - 100px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .card-container {
      display: flex;
      flex-wrap: nowrap;

      .card-item {
        flex: 0 0 500px;
        width: 500px;
        height: 330px;
        margin-right: 30px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .options {
    padding: 55px 0;

    &_text {
      font-size: 44px;
    }

    &_icon {
      min-width: 160px;
      max-width: 160px;
    }
  }

  .list {
    margin-left: -50px;
    margin-right: -50px;
    padding: 30px 50px 0 50px;
    background: #ffffff;

    &_title {
      font-size: 56px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    :deep(.van-empty) {
      background: #ffffff;
      margin: 0 130px;
      padding: 100px 0;
    }

    :deep(.van-empty__image) {
      width: 550px;
      height: 550px;
    }

    :deep(.van-empty__description) {
      font-size: 48px;
      line-height: 1.5;
    }
  }

  :deep(.van-nav-bar) {
    background: transparent;

    .van-nav-bar__title {
      color: #ffffff;
    }

    .van-icon {
      color: #ffffff;
    }

    .van-nav-bar__text {
      color: #ffffff;
    }
  }

  .van-hairline--bottom::after {
    border: unset;
  }

  :deep(.van-grid-item__content) {
    background: transparent;
  }
}
</style>
